<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <base href="<%=basePath%>">

    <title>${sessionScope.topicName} - 舆情信息系统-热力图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/mainPageStyle.css"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Gb8gFUKuPydZ5K3HC7Aw3VwV"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style type="text/css">
        ul, li {
            list-style: none;
            margin: 0;
            padding: 0
        }

        #baiduMap {
            min-height: 800px;
            width: 100%;
            border-right: 2px solid #bcbcbc;
            padding: 10px;
        }

        .btn-container {
            margin: 20px;
        }

        fieldset {
            border: 1px solid;
            border-radius: 3px;
        }

        fieldset label {
            font-size: 14px;
            line-height: 30px;
        }

        .btn {
            color: #333;
            background-color: #fff;
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .btn:hover {
            color: #333;
            background-color: #ebebeb;
            border-color: #adadad;
        }

        .text-primary {
            font-weight: bold;
        }

        textarea {
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        textarea:focus {
            border-color: #66afe9;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        }

        .color-list li {
            font-size: 14px;
            line-height: 30px;
        }
    </style>
    <%@include file="../im.jsp" %>
</head>

<body>
<logic:equal name="user" value="administrator">
<div id="content" class="container">
        <%@include file="../top.jsp" %>
    <div class="row">
        <%@include file="../left.jsp" %>

        <div class="col-md-10 rightContent" id="hotMap">
            <div class="panel panel-default">

                <div id="r-result" class="panel-heading">
                    <div class="btn-container">
                        <fieldset>
                            <legend>热力图设置区域</legend>
                            <div class="row">
                                <div class="col-md-6">
                                    <label>设置热力图半径<small>（0-100）</small>：</label>
                                    <input type="range" onchange="setRadius(this.value)" value="20" min="1" style="width:150px" max="100">
                                    <span class="text-primary" id="radius-result">20</span>
                                </div>
                                <div class="col-md-6">
                                    <label>设置热力图透明度<small>（0-100）</small>：</label>
                                    <input type="range" onchange="setOpacity(this.value)" value="60" min="1" style="width:150px" max="100">
                                    <span class="text-primary" id="opacity-result">60</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label>设置热力图渐变区间</label>
                                </div>
                                <div class="col-md-3">
                                    起始颜色: <input type="color" onchange="setGradient()" value="#66FF00" data-key="0.1">
                                </div>
                                <div class="col-md-3">
                                    中间颜色:<input type="color" onchange="setGradient()" value="#FFAA00" data-key="0.5">
                                </div>
                                <div class="col-md-3">
                                    结束颜色: <input type="color" onchange="setGradient()" value="#FF0000" data-key="1.0">
                                </div>
                            </div>

                            <span class="text-primary">显示热力图:<input type="checkbox" checked="checked" onclick="toggle();"></span>
                        </fieldset>
                    </div>

                </div>

                <div class="panel-body well">
                    <div id="baiduMap"></div>
                </div>


            </div>
            <!--end of right-->

        </div>
    </div>
        <%@ include file="../foot.jsp" %>
    </logic:equal>
    <logic:empty name="user">
    Access Rejected! Error 404
    </logic:empty>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("baiduMap");          // 创建地图实例
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl());       // 添加默认比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_TOP_RIGHT}));   //右上角，打开
    var point = new BMap.Point(116.418261, 39.921984);
    map.centerAndZoom(point, 6);             // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
    function pointObj(lng, lat, count) {
        this.lng = lng;
        this.lat = lat;
        this.count = count;
    }
    var MAX = 50;
    var i = 0;
    var j = 0;
    var lo = '${loc}';
    var jsO = eval(lo);
    console.log("jso:" + jsO);
    loca = jQuery.parseJSON(lo);

    //    var lo=eval(loc);
    console.log(lo);


    console.log("loc:" + lo);
    //以北京为中心
    //    var points = [];
    //    for (; i < MAX; i++) {
    //        pt = new BMap.Point();
    //        var point = new pointObj(Math.random() * 10 + 109.300884, Math.random() * 20 + 20.04511, Math.random() * 100);
    //        points.push(point);
    //    }
    //
    //    //以武汉为中心
    //    for (; j < MAX; j++) {
    //        pt = new BMap.Point();
    //        var point = new pointObj(Math.random() * 10 + 111.414274, Math.random() * 20 + 29.915325, Math.random() * 100);
    //        points.push(point);
    //    }
    //
    //    points.push(new pointObj(114.312383, 30.604501, 150));
    //    points.push(new pointObj(116.414274, 39.915325, 180));
    //    console.log("lo:"+lo);
    //    console.log("points:"+typeof points);
    //    console.log(points);


    if (!isSupportCanvas()) {
        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    }


    //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md

    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力的透明度,1-100
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
     .2:'rgb(0, 255, 255)',
     .5:'rgb(0, 110, 255)',
     .8:'rgb(100, 0, 255)'
     }
     其中 key 表示插值的位置, 0~1.
     value 为颜色值.
     */
    heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 20});
    map.addOverlay(heatmapOverlay);
    heatmapOverlay.setDataSet({data: jsO, max: 100});


    function setRadius(radius) {
        document.getElementById("radius-result").innerHTML = radius;
        heatmapOverlay.setOptions({"radius": radius})
    }

    function setOpacity(opacity) {
        document.getElementById("opacity-result").innerHTML = opacity;
        heatmapOverlay.setOptions({"opacity": opacity})
    }

    function toggle() {
        heatmapOverlay.toggle()
    }

    function setGradient() {

        /*
         格式如下所示:
         {
         0:'rgb(102, 255, 0)',
         .5:'rgb(255, 170, 0)',
         1:'rgb(255, 0, 0)'
         }
         */
        var gradient = {};
        var colors = document.querySelectorAll("input[type='color']");
        colors = [].slice.call(colors, 0);
        colors.forEach(function (ele) {
            gradient[ele.getAttribute("data-key")] = ele.value;
        });
        heatmapOverlay.setOptions({"gradient": gradient});
    }


    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }


</script>